<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <p>您输入的内容是：{{message}} </p>
        <!-- 指令名：事件.修饰符=值 -->

        <!-- v-model 是双向数据绑定，v-model就相当于 一个 v-bind 加一个 v-on -->
        <input type="text" :value="message" @input="changeMessage" placeholder="请输入内容">
        <!--默认情况下，v-model 会在每次 input（实时响应） 事件后更新数据 (IME 拼字阶段的状态例外)。
        你可以添加 lazy 修饰符来改为在每次 change（在元素失去焦点且值发生变化时触发） 事件后更新数据  -->
        <!-- 减少数据更新的频率，提高性能 -->
        <input type="text" v-model.lazy="message" placeholder="请输入内容">

        <!-- .number让用户输入自动转换为数字 -->
        <p>您输入的内容是：{{count + 10}} </p>
        <input type="text" v-model.number="count" placeholder="请输入数字">
        <br>
        <!-- .trim去除两端的空格 -->
        <input type="text" v-model.trim="message" placeholder="请输入内容">
        <hr>
        <textarea v-model="message" placeholder="多行内容"></textarea>
        <div>
            <h3>复选框</h3>
            是否同意该协议？
            <input id="checkbox" type="checkbox" v-model="checkbox" true-value="同意" false-value="不同意">
            <!-- <label for="checkbox">{{checkbox ? '同意' : '不同意'}}</label> -->
            <label for="checkbox">{{checkbox}}</label>
        </div>

        <div>
            <h3>多个复选框</h3>
            <!-- 多选的时候可以将值绑定为一个数组，每个输入框有不同的 value 值 -->
            <input type="checkbox" v-model="checkboxList" value="学习" name="" id="">学习
            <input type="checkbox" v-model="checkboxList" value="吃饭" name="" id="">吃饭
            <input type="checkbox" v-model="checkboxList" value="睡觉" name="" id="">睡觉
            <input type="checkbox" v-model="checkboxList" value="刷剧" name="" id="">刷剧
            <input type="checkbox" v-model="checkboxList" value="DNF" name="" id="">DNF
            <input type="checkbox" v-model="checkboxList" value="侠盗飞车" name="" id="">侠盗飞车
            <p>
                {{ checkboxList }}
            </p>
        </div>

        <div>
            <h3>单选</h3>
            <!-- 单选的时候要绑定同一个属性，但是要设置不同的 value  -->
            <input id="sex1" type="radio" v-model="sex" value="男">
            <label for="sex1">男</label>
            <input id="sex2" type="radio" v-model="sex" value="女">
            <label for="sex2">女</label>
            <p>{{sex}}</p>
        </div>

        <div>
            <h3>选择器：{{select}}</h3>
            <!-- option 设置 value 属性可以将值取出使用，选择的时候是标签内容，取的时候为 value 的值 -->
            <select v-model="select" name="" id="">
                <option value="a">黄焖鸡</option>
                <option value="b">黄焖排骨</option>
                <option value="c">黄焖🐟</option>
                <option value="d">黄焖虾</option>
                <option value="e">黄焖鸡蛋</option>
            </select>
        </div>

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                message: '',
                count: 0,
                checkbox: '不同意',
                checkboxList: [],
                sex: '',
                select: ''
            }
        },
        methods: {
            changeMessage() {
                this.message = event.target.value
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>